<template>
    <div class="pie-component">
        <filter-params @paramsChange="paramsChange" :config="config" :filterParams="config.filterParams" ></filter-params>
        <div class="pie-content" :ref="config.alias"></div>
    </div>
</template>

<script>
import ChartPublic from '../ChartPublic.js'

export default {
    /**
     * 饼图
     */
    name: "pieComponent",
    mixins: [ChartPublic],
    data() {
        return {
        }
    },
    methods: {

        setOption(){
            //图例组件
            let legend = [];
            let dimensions = [];
            /**
             *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
             */
            let series = [];
            dimensions=this.getDimensions();
            //获取度量
            for (let i = 0; i < this.config.measures.length; i++) {
                let array=[];
                let measure = this.config.measures[i];
                legend.push(measure.fieldLabel);
                for (let j = 0; j < this.data.length; j++) {
                    let value= this.data[j][measure.tableName+'_'+measure.fieldName];
                    if(value){
                        array.push({
                            value:value,
                            name:dimensions.data[j]
                        });
                    }else {
                        array.push({
                            value:0,
                            name:dimensions.data [j]
                        });
                    }
                }
                let obj={
                    name: measure.fieldLabel,
                    type:this.config.reportType,
                    data:array,
                }
                if(this.config.advConfig.inside && this.config.advConfig.outside){
                    let radius=[];
                    //内
                    radius.push(this.config.advConfig.inside);
                    //外
                    radius.push(this.config.advConfig.outside);
                    obj.radius=radius;
                }
                series.push(obj);
            }
            this.option={
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {show:this.config.advConfig.saveAsImage},
                        restore: {show: this.config.advConfig.restore}
                    }
                },
                color:this.getColors(),
                legend: {
                    orient: 'vertical',
                    show:this.config.advConfig.legendShow,
                    left:this.config.advConfig.legendLeft,
                    top:this.config.advConfig.legendTop
                },
                series: series
            };

        }
    }
}
</script>

<style scoped>
.pie-component{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.pie-content{
    flex: 1;
}
</style>
